<template>
  <div class="v2ex-input">
    <i class="el-icon-search"
      @click="handleIconClick"
    ></i>
    <input
      type="text"
      @input="handleInput"
    />
  </div>
</template>

<script>
  export default{
    name : 'v2ex-input',
    props : {
      onIconClick: Function,
    },
    methods : {
      handleIconClick(event) {
        if (this.onIconClick) {
          this.onIconClick(event);
        }
        this.$emit('click', event);
      },
      handleInput(event) {
        const value = event.target.value;
        this.$emit('input', value);
      },
    }
  }
</script>

<style scoped>
  .v2ex-input{
    height: 30px;
    width: 270px;
    border : 1px solid black;
    border-radius: 30px;
    line-height: 30px;
  }
  i{
    margin-left: 7px;
  }
  input{
    width: 230px;
    height: 20px;
    font-size: 20px;
    padding: 0;
    border: 0;
  }
  input:focus{
    outline: 0;
  }
</style>
